/*
    定义产品卡片组件
    鼠标悬浮时展示产品概要。
*/
export const productCardModel = (editor) => {
  const productCardModel = editor.DomComponents.addType('product-card', {
    model: {
      defaults: {
        tagName: 'div',
        classes: ['card3'],
        src: 'https://picsum.photos/300',
        title: '产品展示',
        description: '产品描述',
        script() {
          // 获取当前元素
          const cardEl = this;
          const src = cardEl.getAttribute('src');
          const title = cardEl.getAttribute('title');
          const description = cardEl.getAttribute('description');

          // 设置HTML内容
          cardEl.innerHTML = `
        <div class="remove-when-use">
          <img src="${src}" alt="item.src" style="object-fit: cover;height: 100%;width: 100%;">
        </div>
        <div class="details">
          <label>${title}</label>
          <p>${description}</p>
        </div>
      `;

          // 鼠标悬浮事件
          cardEl.addEventListener('mouseover', () => {
            cardEl.querySelector('.details').style.height = '4.2em';
          });

          cardEl.addEventListener('mouseout', () => {
            cardEl.querySelector('.details').style.height = '2.6em';
          });
        },
        styles: `
      .card3 {
        width: 200px;
        height: 200px;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
        position: relative;
      }
      
      .remove-when-use {
        text-align: center;
        width: 100%;
        color: black;
        top: 85px;
        font-weight: bold;
      }
      
      .details > p {
        font-size: .8em;
        margin-top: 1.5em;
      }
      
      .details > label {
        font-weight: bold;
      }
      
      .details {
        color: white;
        box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        position: absolute;
        bottom: 0;
        height: 2.6em;
        transition: height .5s ease-in-out;
        padding: 0.6em;
        overflow: hidden;
      }
      
      .card3:hover > .details {
        height: 4.2em;
      }
    `
      },
    },
  });

  // 给 component type 定义 view
  const productCardView = editor.DomComponents.getType('default').view.extend({
    events: {
      // 设置点击方法，修改组件属性
      click: function () {
        const model = this.model;
        const attrs = model.getAttributes();

        const newSrc = prompt('请输入产品图片的URL', attrs.src);
        const newTitle = prompt('请输入产品名称', attrs.title);
        const newDescription = prompt('请输入产品描述', attrs.description);

        if (newSrc && newTitle && newDescription) {
          model.addAttributes({
            src: newSrc,
            title: newTitle,
            description: newDescription,
          });
          // 触发 script 方法
          model.trigger('change:script');
        }
      },
    },
  });
  // 注册 component 和 view
  editor.DomComponents.addType('product-card', {
    model: productCardModel,
    view: productCardView,
  });

  // 注册 product-card
  editor.BlockManager.add('product-card', {
    label: '产品卡片',
    category: '产品中心组件',
    content: { type: 'product-card' },
  });
};

